import { ref } from 'vue';   //引入ref
import { useEventListener } from './event'; //引入事件监听函数

// 监听滚动事件，主要用于数据列表滚动加载更多
// 按照惯例，组合式函数名以“use”开头
export function useWindowsWidth() {
    // 被组合式函数封装和管理的状态
    const windowsWidth = ref(window.innerWidth);
    const windowsWidthType = ref('pc');
    getWindowsWidthType();  // 判断浏览器宽度类型

    useEventListener(window, 'resize', (event) => {
        windowsWidth.value = window.innerWidth;

        // 判断浏览器宽度类型
        getWindowsWidthType();
    })

    // 判断浏览器宽度类型
    function getWindowsWidthType() {
        if (windowsWidth.value > 800) {
            windowsWidthType.value = 'pc';
        } else {
            windowsWidthType.value = 'mobile';
        }
    }

    // 通过返回值暴露所管理的状态
    return { windowsWidthType, windowsWidth };
}